<!doctype html>
<html>
	<head>
		<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--当前页面的三要素-->
		<title>第十六节：css高级(下)布局</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			img{border:0;display:block;}
			.left{background:#6C0;height:300px;width:50%;float:left;}
			h3{display:block;text-align:center;}
			.right{background:#C90;height:300px;width:50%;float:left;}
			.gall{width:800px;margin:10px auto;float:left;}
			.gall .gleft{width:450px;height:200px;background:#6C0;float:left;}
			.gall .gright{width:350px;height:200px;background:#C90;float:left;}
			.tall{width:800px;margin:10px auto;float:left;}
			.tall .tleft{width:200px;height:300px;background:#6C0;float:left;}
			.tall .tcenter{width:300px;height:300px;background:#C6F;float:left;}
			.tall .tright{width:300px;height:300px;background:#6C0;float:left;}
			
			/*mv start*/
			.mv{width:590px;margin:10px auto;float:left;}
			.mv .m_left{width:287px;float:left;}
			.mv .m_right{width:300px;float:right;}
			.mv .m_right a{float:left;margin-right:3px;margin-bottom:3px;}

			.mv a:hover img{opacity:0.8;filter:alpha(opacity=80);}
			.mv a{text-decoration:none;display:block;
				position:relative;
			}
			.mv a span{background:#000;color:#fff;opacity:0.8;filter:alpha(opacity=80);
				display:inline-block;padding: 5px 15px;border-radius: 20px;
				position:absolute;
				bottom: 10px;
				left: 11px;
			}
			/*end mv*/
			.clear{clear:both;}

		</style>

	</head>
<body>
	<h2>十六节：css高级(下)</h2>
	<h3>两列布局 - 自适应 宽度</h3>
	<div class="left"></div>
	<div class="right"></div>
	
	<div class="gall">
		<h3>两列布局 - 固定宽度</h3>
		<div class="gleft"></div>
		<div class="gright"></div>
	</div>
	
	<div class="tall">
		<h3>三列布局 - 固定宽度</h3>
		<div class="tleft"></div>
		<div class="tcenter"></div>
		<div class="tright"></div>
	</div>
	
	<div class="mv">
		<h3>透明技术定位</h3>
		<div class="m_left">
			<a href="#">
				<img src="images/1.jpg" alt="女神Angelababy" width="287" height="287" />
				<span>女神Angelababy</span>
			</a>
		</div>
		<div class="m_right">
			<a href="#">
				<img src="images/2.jpg" alt="" width="142" height="142" />
				<span>投票赢大奖！</span>
			</a>
			<a href="#">
				<img src="images/3.jpg" alt="" width="142" height="142" />
				<span>辣妈李小璐</span>
			</a>
			<a href="#">
				<img src="images/4.jpg" alt="" width="287" height="142" />
				<span>星闻星事</span>			
			</a>
		</div>
	</div>

</body>
</html>